<template>
  <div class="sousuo">
    <router-view></router-view>
    <van-nav-bar
        title="搜索"
        left-text="返回"
        right-text="..."
        left-arrow
        @click-left="$router.go(-1)"
    />
    <div class="top">
        <input type="text" placeholder="搜索商品或店铺" v-model="value"><span @click="cha()">搜索</span>
    </div>
    <div class="lishi" v-show="zi==false">
        <div>
            <span>历史记录</span><span>删除</span>
        </div>
        <div class="jilu">
            <span>天天鲜挪威三文鱼(立水桥店)</span>
        </div>
    </div>
    <div class="faxiang" v-show="zi==false">
        <div>
            <span>搜索发现</span>
        </div>
        <div class="fx">
            <span>麻辣烫</span>
            <span>米线</span>
            <span>披萨</span>
            <span>蛋糕</span>
            <span>汉堡</span>
            <span>腊八粥</span>
            <span>烤肉拌饭</span>
            <span>炸鸡</span>
            <span>味多美(温阳路店)</span>
        </div>
    </div>
    <div class="diang" v-for="(item,index) in list" :key="index" v-show="zi==true">
        <div>
            <img :src="item.picUrl" alt="">
        </div>
        <div>
            <p>{{item.name}}</p>
            <span>{{item.monthSalesTip}}</span><span>{{item.minPriceTips}}</span><br>
            <span>{{item.shippingFeeTip}}</span>
        </div>
    </div>
  </div>
</template>

<script>
import { toRefs } from 'vue'
import {shop_search} from '../../utils/api'
export default {
    data() {
        return {
            value:'',
            list:[],
            zi:false,
        }
    },
   
   methods: {
    cha(){
        shop_search( {searchkey: this.value}).then((res)=>{
            this.list=res.data.list;
            console.log(res.data.list)
        })
        this.zi = !this.zi;
    }
   },
}
</script>

<style lang="scss" scoped>
.diang{
    display: flex;


}
.diang>div:nth-child(1){
    width: 100px;
}
.diang>div:nth-child(1)>img{
    width: 100%;
}
    .sousuo{
        position: absolute;
        padding: 10px;
        .top{
            width: 100%;
            margin: 10px 0;
            input{
                width: 85%;
                height: 25px;
                background-color: #f5f5f5;
                border: none;
                text-align: center;
                margin-right: 5px;
                border-radius: 5px;
            }
            span{
                font-size: 20px;
                color: lightskyblue;
            }
        }
        .lishi{
            div{
                &:nth-child(1){
                    span{
                        font-size: 20px;
                        display: inline-block;
                        &:nth-child(2){
                            float: right;
                        }
                    }
                }   
            }
            .jilu{
                    span{
                        display: inline-block;
                        padding: 5px 10px;
                        background-color: #f5f5f5;
                        margin: 10px;
                    }
                }
        }
        .faxiang{
            div{
                &:nth-child(1){
                    span{
                        font-size: 20px;
                    }
                }
            }
            .fx{
                span{
                    display: inline-block;
                    padding: 5px 10px ;
                    background-color: #f5f5f5;
                    margin: 10px;
                }
            }
        }
    }
</style>